<template>
	<view>
		<scroll-view class="scrolla" scroll-y="true" :show-scrollbar="false" scroll-with-animation>
			<view class="titlws">
				<view class="titlwsx">
					{{form.status==1?'待乘车':form.status==2?'已验票':form.status==3?'退款中':form.status==4?'已退款':form.status==9?'已过期':''}}
				</view>
				<view class="titlwsy" v-if="form.status==1">
					您的车票已支付完成，请提前10分钟到达乘车点
				</view>
				<view class="titlwsy" v-if="form.status==2">
					您已经完成乘车，如需出行请再次预订
				</view>
				<view class="titlwsy" v-if="form.status==3">
					您正在申请退票中，如需出行请再次预订
				</view>
				<view class="titlwsy" v-if="form.status==4">
					您的车票已退票完成，如需出行请再次预订
				</view>
				<view class="titlwsy" v-if="form.status==9">
					您的车票已过期，如需出行请再次预订
				</view>
			</view>
			<view class="MyOrder">
				<view class="MyOrder_1x">
					{{form.startPoint||''}} <text class="iconfont icondanxiangzhuanhuan"
						style="color: #999;margin: 0 10upx;"></text>
					{{form.endPoint||''}}
				</view>
				<view class="MyOrder_1y_2">
					<view class="MyOrder_1y_2x">
						<text class="MyOrder_1y_2x-1x"></text>{{form.address||''}}
					</view>
					<view class="MyOrder_1y_2tse">
						<view class="MyOrder_1y_2t">
							<view class="MyOrder_1y_2tz">
								<view class="">
									车票数量：{{form.seatSum||''}}
								</view>
								<view class="">
									车票价格：¥{{form.priceSum?form.priceSum/form.seatSum:''}}
								</view>
							</view>
							<view class="MyOrder_1y_2tx">
								<view class="">
									{{form.code||''}}
								</view>
								<view class="">
									{{form.vehicle||''}}
								</view>
							</view>
						</view>
					</view>
					<view class="MyOrder_1y_2x">
						<text class="MyOrder_1y_2y-1y"></text>{{form.priceAddress||''}}
					</view>
				</view>
			</view>
			<view class="OrderDetails">
				<view class="OrderDetails_t">
					订单信息
				</view>
				<view class="OrderDetails_f">
					<view class="OrderDetails_fl">
						下单时间：
					</view>
					<view class="OrderDetails_fb">
						{{form.createDate||''}}
					</view>
				</view>
				<view class="OrderDetails_f">
					<view class="OrderDetails_fl">
						订单号：
					</view>
					<view class="OrderDetails_fb">
						{{substringsA(form.id)||''}}
					</view>
				</view>
				<view class="OrderDetails_f">
					<view class="OrderDetails_fl">
						支付方式：
					</view>
					<view class="OrderDetails_fb">
						微信
					</view>
				</view>
				<view class="OrderDetails_f">
					<view class="OrderDetails_fl">
						发车日期：
					</view>
					<view class="OrderDetails_fb">
						{{form.departDate||''}}
					</view>
				</view>
				<view class="OrderDetails_f">
					<view class="OrderDetails_fl">
						发车时间：
					</view>
					<view class="OrderDetails_fb">
						{{form.departTime||''}}
					</view>
				</view>
			</view>
			<view class="disbuxs">
				<view class="disbu">
					<view class="disbu1">
						<view class="disbu1-2">
							乘车人
						</view>
					</view>
					<view class="disbu1 xjjhhd">
						<view class="disbu1-2">
							票价类型
						</view>
					</view>
					<view class="disbu1">
						<view class="disbu1-2">
							座位号
						</view>
					</view>
				</view>
				<view class="disbu" v-for="(item,index) in form.ddOrderDetailList" :key="index">
					<view class="disbu1">
						<view class="disbu1-1">
							{{item.name}}
						</view>
					</view>
					<view class="disbu1 xjjhhd">
						<view class="disbu1-1">
							全票
						</view>
					</view>
					<view class="disbu1">
						<view class="disbu1-1">
							{{item.seat}}
						</view>
					</view>
				</view>
			</view>
			<view class="OrderDetails" style="padding-top: 25upx;">
				<view class="OrderDetails_f" style="margin-bottom: 0;">
					<view class="OrderDetails_fl" style="font-size: 32upx;color: #000;font-weight: 500;">
						实付金额：
					</view>
					<view class="OrderDetails_fb" style="font-weight: 500;margin-left: auto;">
						¥ <text style="font-size: 36upx;">{{form.priceSum||''}}</text>
					</view>
				</view>

			</view>
			<view class="" style="height: 25upx;">

			</view>
			<view class="Routedetails-bottomy">

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				form: {},
			}
		},
		onLoad(option) {
			this.form = JSON.parse(decodeURIComponent(option.id))
			console.log(this.form)
		},

		methods: {
			substringsA(str) {
				if (str) {
					var data = str.substring(str.length - 12)
					return data.toUpperCase()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scrolla {
		height: 100vh;
		overflow: auto;
		background-color: #f7f7f7;
	}

	.titlws {
		padding: 35upx;

		.titlwsx {
			font-size: 42upx;
			font-weight: 500;
		}

		.titlwsy {
			font-size: 30upx;
			color: #666;
			margin-top: 10upx;
		}
	}

	.OrderDetails {
		background-color: #fff;
		padding: 0 35upx;
		margin-top: 25upx;
		padding-bottom: 25upx;

		.OrderDetails_t {
			font-size: 32upx;
			font-weight: 500;
			height: 100upx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}

		.OrderDetails_f {
			display: flex;
			align-items: center;
			font-size: 30upx;
			margin-bottom: 20upx;

			.OrderDetails_fl {
				color: #999;
				flex: none;
				width: 160upx;
			}
		}
	}

	.MyOrder {
		background-color: #fff;
		border-top-right-radius: 25upx;
		border-top-left-radius: 25upx;
		padding: 35upx;

		.MyOrder_1x {
			font-size: 30upx;
			color: #333;
			margin-bottom: 25upx;
		}

		.MyOrder_1y_2 {
			.MyOrder_1y_2tse {
				border-left: 4upx dashed #eff0f2;
				margin-left: 18upx;
				padding: 20upx 0;

				.MyOrder_1y_2t {
					font-size: 28upx;
					color: #999;
					padding: 20upx 0;
					padding-left: 50upx;
					padding-right: 30upx;
					display: flex;
					align-items: center;
					background: linear-gradient(to right, #fff, #eff0f2);

					.MyOrder_1y_2tz {
						margin-right: auto;
					}

				}


			}

			.MyOrder_1y_2x {
				font-size: 36upx;
				display: flex;
				align-items: center;
				font-weight: 500;

				.MyOrder_1y_2x-1x {
					width: 20upx;
					height: 20upx;
					background: #61d34e;
					border-radius: 50%;
					border: 10upx solid #dff6dc;
					margin-right: 20upx;
				}

				.MyOrder_1y_2y-1y {
					width: 20upx;
					height: 20upx;
					background: #f3b158;
					border-radius: 50%;
					border: 10upx solid #fcefdd;
					margin-right: 20upx;
				}
			}
		}


	}

	.Routedetails-bottomx {
		position: fixed;
		display: flex;
		align-items: center;
		padding: 0 36upx;
		padding-left: 10upx;
		height: calc(120upx + env(safe-area-inset-bottom));
		z-index: 102;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		background-color: #fff;

		.Routedetails-bottom1 {
			text-align: center;
			margin-left: 36upx;
			color: #333;
			border-bottom: 2upx solid #333;
		}

		.Routedetails-bottom-bt {
			background-color: #4374eb;
			color: #fff;
			font-size: 32upx;
			flex: 1;
			text-align: center;
			line-height: 90upx;
			margin-left: 36upx;
			height: 90upx;
			border-radius: 45upx;
		}
	}

	.Routedetails-bottomy {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		height: calc(120upx + env(safe-area-inset-bottom));
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		z-index: 10;
	}

	.disbuxs {
		margin-top: 10upx;
		padding: 20upx 0;
		background: #efeef3;
	}

	.disbu {
		display: flex;
		font-size: 28upx;
	}

	.disbu1 {
		flex: 1;
		text-align: center;
	}

	.disbu1-1 {
		color: #6C6C6C;
		line-height: 60upx;
	}

	.disbu1-2 {
		line-height: 60upx;
		font-weight: 550;
	}
</style>